<template>
    <basic-container>
        <avue-crud
                :option="option"
                :table-loading="loading"
                :data="data"
                v-model:page="page"
                ref="crud"
                @row-del="rowDel"
                v-model="form"
                :permission="permissionList"
                @row-update="rowUpdate"
                @row-save="rowSave"
                :before-open="beforeOpen"
                @search-change="searchChange"
                @search-reset="searchReset"
                @selection-change="selectionChange"
                @current-change="currentChange"
                @size-change="sizeChange"
                @refresh-change="refreshChange"
                @on-load="onLoad"
        >
            <template #menu-left>
                <el-button
                        type="danger"
                        icon="el-icon-delete"
                        plain
                        v-if="permissionList.editBtn"
                        @click="handleDelete"
                >删 除
                </el-button>
                <el-button
                        type="primary"
                        icon="el-icon-download"
                        @click="handleExport"
                >导出
                </el-button>
            </template>
            <template #="{ row }">
                <el-tag>{{ row.categoryName }}</el-tag>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>
    import {ListMixin} from "@/mixins/ListMixin";

    export default {
        data() {
            return {
                option: {
                    height: 'auto',
                    calcHeight: 32,
                    dialogWidth: 950,
                    tip: false,
                    searchShow: true,
                    searchMenuSpan: 6,
                    border: true,
                    index: true,
                    viewBtn: true,
                    selection: true,
                    excelBtn: true,
                    dialogClickModal: false,
                    column: [
                        {
                            label: '通知标题',
                            prop: 'title',
                            span: 24,
                            row: true,
                            search: true,
                            rules: [
                                {
                                    required: true,
                                    message: '请输入通知标题',
                                    trigger: 'blur',
                                },
                            ],
                        },
                        {
                            label: '通知类型',
                            type: 'select',
                            dicUrl: '/blade-system/dict/dictionary?code=notice',
                            props: {
                                label: 'dictValue',
                                value: 'dictKey',
                            },
                            dataType: 'number',
                            slot: true,
                            prop: 'category',
                            search: true,
                            rules: [
                                {
                                    required: true,
                                    message: '请输入通知类型',
                                    trigger: 'blur',
                                },
                            ],
                        },
                        {
                            label: '通知时间',
                            prop: 'releaseTimeRange',
                            type: 'datetime',
                            format: 'YYYY-MM-DD HH:mm:ss',
                            valueFormat: 'YYYY-MM-DD HH:mm:ss',
                            searchRange: true,
                            hide: true,
                            addDisplay: false,
                            editDisplay: false,
                            viewDisplay: false,
                            search: true,
                            rules: [
                                {
                                    required: true,
                                    message: '请输入通知时间',
                                    trigger: 'blur',
                                },
                            ],
                        },
                        {
                            label: '通知日期',
                            prop: 'releaseTime',
                            type: 'date',
                            format: 'YYYY-MM-DD HH:mm:ss',
                            valueFormat: 'YYYY-MM-DD HH:mm:ss',
                            rules: [
                                {
                                    required: true,
                                    message: '请输入通知日期',
                                    trigger: 'click',
                                },
                            ],
                        },
                        {
                            label: '通知内容',
                            prop: 'content',
                            component: 'avue-ueditor',
                            options: {
                                action: '/blade-resource/oss/endpoint/put-file',
                                props: {
                                    res: 'data',
                                    url: 'link',
                                },
                            },
                            hide: true,
                            minRows: 4,
                            span: 24,
                        },
                    ],
                },

                // 配置项
                listMixinConfig: {
                    // 对应的api目录下 js文件
                    api: "demo/demo_api", // == @/api/demo/demo_api.js
                    // 对应api中方法名称  默认与属性名相同
                    apiProps: {
                        getList: "getList",  // 默认为"getList"，这里模拟映射为 "list"方法
                        add: "add",
                        update: "update",
                        getDetail: "getDetail",
                        remove: "remove",
                    },
                    // 导出Excel数据
                    export: {
                        name: "test",
                        url: "/blade-system/region/export-region"
                    },
                    // ----------------------以下默认fase
                    // 禁止使用默认 用于自定义
                    disableOnLoad: false, // 对应方法"onLoad", 如果为true,可重写“onLoad”方法, 参数（page, params = {}）
                    // 禁止使用默认保存 用于自定义
                    disableRowSave: false, // 对应方法"rowSave", 如果为true,可重写“rowSave”方法, 参数（row, done, loading）
                    // 禁止使用默认更新 用于自定义
                    disableRowUpdate: false, // 对应方法"rowUpdate", 如果为true,可重写“rowUpdate”方法, 参数（row, index, done, loading）
                    // 禁止使用默认 打开窗口 用于自定义
                    disableBeforeOpen: false, // 对应方法"beforeOpen", 如果为true,可重写“beforeOpen”方法, 参数（done, type）
                    // 禁止使用默认 删除 用于自定义
                    disableRowDel: false, // 对应方法"rowDel", 如果为true,可重写“rowDel”方法, 参数（row）
                    // 禁止使用默认 批量删除 用于自定义
                    disableHandleDelete: false, // 对应方法"handleDelete", 如果为true,可重写“handleDelete”方法, 参数（）
                    // 禁止使用默认 导出数据 用于自定义
                    disableHandleExport: false, // 对应方法"handleExport", 如果为true,可重写“handleExport”方法, 参数（）
                },
            };
        },
        mixins: [ ListMixin ],
        computed: {
            permissionList() {
                return {
                    // 默认 四个为false, 需自行绑定设置
                    addBtn: this.validData(this.permission.notice_add, false),
                    viewBtn: this.validData(this.permission.notice_view, false),
                    delBtn: this.validData(this.permission.notice_delete, false),
                    editBtn: this.validData(this.permission.notice_edit, false),
                };
            },
        },
        methods: {
            /**
             *  配置创造之前
             */
            configBefore() {
              console.log("configBefore")
            },

            /*************************** before and after 方法 默认不调用，可自行设置 **********************/
            /**
             * onLoad 加载前执行
             * @returns {boolean} true: 会终止onLoad
             */
            onLoadBefore(page, params) {
                console.log("onLoadBefore");
                return false;
            },
            /**
             * onLoad 加载完成后执行
             */
            onLoadAfter() {
                console.log("onLoadAfter");
            },
            /**
             * onLoad 加载错误
             */
            onLoadError(error) {
                console.log("onLoadError");
            },
            /**
             * 添加之前
             * @param row
             * @param done
             * @param loading
             * @returns {boolean} true: 会终止
             */
            addBefore(row, done, loading) {
                console.log("addBefore");
                return false
            },
            /**
             * 添加之后
             */
            addAfter() {
                console.log("addAfter");
            },
            /**
             * 添加错误
             */
            addError(error) {
                console.log("addError");
            },
            /**
             * 修改之前
             * @param row
             * @param index
             * @param done
             * @param loading
             * @returns {boolean} true: 会终止
             */
            updateBefore(row, index, done, loading) {
                console.log("updateBefore");
                return false
            },
            /**
             * 修改之后
             */
            updateAfter() {
                console.log("updateAfter");
            },
            /**
             * 修改错误
             */
            updateError(error) {
                console.log("updateError");
            },
            /**
             * 删除之前（单个）
             * @param row
             * @param done
             * @param loading
             * @returns {boolean} true: 会终止
             */
            removeBefore(row) {
                console.log("removeBefore");
                return false
            },
            /**
             * 删除之后（单个）
             */
            removeAfter() {
                console.log("removeAfter");
            },
            /**
             * 删除错误（单个）
             */
            removeError(error) {
                console.log("removeError");
            },
            /**
             * 删除之前（批量）
             * @returns {boolean} true: 会终止
             */
            removeBatchBefore() {
                console.log("removeBatchBefore");
                return false
            },
            /**
             * 删除之后（批量）
             */
            removeBatchAfter() {
                console.log("removeBatchAfter");
            },
            /**
             * 删除之后（批量）
             */
            removeBatchError(error) {
                console.log("removeBatchError");
            },
            /**
             * @before-open 的详情方法, 调用之前
             * @returns {boolean} true: 会终止
             */
            detailBefore() {
                console.log("detailBefore");
                return false
            },
            /**
             * @before-open 的详情方法, 调用之后
             */
            detailAfter(type) {
                console.log("detailAfter", type);
                return false
            },
            /**
             * 详情方法, 加载错误
             */
            detailError(error) {
                console.log("detailError");
            },
            /**
             * 导出之前
             * @param query 查询参数，可自行设置
             */
            exportBefore(query) {
                console.log("exportBefore");
            },
            /**
             * 导出错误
             */
            exportError(error) {
                console.log("exportError");
            }
        },
    };
</script>

<style></style>
